Skip to content

Fix state update on an unmounted component #65

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Merged
merged 2 commits into from
Oct 22, 2024
Merged

Fix state update on an unmounted component #65

merged 2 commits into from
Oct 22, 2024

Conversation

@rjwills28
Copy link
Collaborator

@rjwills28 rjwills28 commented Oct 22, 2024

After updating the machine-status client to use vite and vitest I noticed that I was getting some warnings when running the tests:

Warning: Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in a useEffect cleanup function.
    at EmbeddedDisplay (/home/user/cs-web/machine-status/node_modules/@diamondlightsource/cs-web-lib/dist/cjs/index.js:54548:42)
    at LoadEmbeddedDirect (/home/user/cs-web/machine-status/src/app.tsx:39:29)
    at RedirectAfterTimeout (/home/user/cs-web/machine-status/src/app.tsx:618:1)
    at LoadRedirectView
    at Route (/home/user/cs-web/machine-status/node_modules/react-router/cjs/react-router.js:664:29)
    at Switch (/home/user/cs-web/machine-status/node_modules/react-router/cjs/react-router.js:866:29)
    at div
    at Provider (/home/user/cs-web/machine-status/node_modules/react-redux/lib/components/Provider.js:21:20)
    at AppScreen (/home/user/cs-web/machine-status/src/app.tsx:105:22)
    at Router (/home/user/cs-web/machine-status/node_modules/react-router/cjs/react-router.js:283:30)
    at BrowserRouter (/home/user/cs-web/machine-status/node_modules/react-router-dom/cjs/react-router-dom.js:75:35)

As it states, it is due to it trying to update the state on an unmounted component. This might not be an issue in production but is highlighted in the tests as the component gets unmounted almost immediately after mounting.

To eliminate this I have simply added a check that the component is mounted before updating the state and then have added a return function which is called when the component is unmounted and can set the isMounted check variable to false.

@rjwills28
Clean up tasks that lead to state updates on unmounted components
76313a3 
This throws warnings as the component is unmounted before state
changes can be applied (seen in client tests). Check that component
is still mounted before updating state.
@rjwills28
Rename state condition to isMounted
6677fde
abigailalexander
abigailalexander approved these changes Oct 22, 2024
View reviewed changes
Copy link
Collaborator

@abigailalexander abigailalexander left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Tested and can confirm this removes the error when running vitest tests in machine-status, and affects no other functionality.

@rjwills28 rjwills28 merged commit 15531a6 into master Oct 22, 2024
2 checks passed
@abigailalexander abigailalexander deleted the fix_state_update_on_unmounted_comp branch March 19, 2025 08:21
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@abigailalexander abigailalexander abigailalexander approved these changes

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

3 participants

@rjwills28 @abigailalexander